<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/index/css/public.css}" media="all">
  <style>
    body {
      background-color: #ffffff;
    }
    .image-container {
      position: relative;
      display: inline-block;
    }

    .close-button {
      position: absolute;
      top: -6px;
      right: 3px;
      background-color: rgb(70 67 67 / 70%);
      color: white;
      font-size: 22px;
      width: 15px;
      height: 15px;
      padding: 4px;
      line-height: 15px;
      text-align: center;
      cursor: pointer;
      border-radius: 50px;
    }

    #upload-demo-preview img{
      margin-right: 5px;
      width: 90px;
      height: 90px;
    }
    .progressBox{
      position: absolute;
      width: 90px;
      height: 90px;
      top: 0;
      background-color: rgb(128 122 122 / 47%);
      display: none;
    }

    .progressBox > .layui-progress-big{
      top: 36px;
    }

  </style>
</head>
<body>
<div class="layui-form-item">
  <label class="layui-form-label required">图片</label>
  <div class="layui-input-block">
    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
      <i class="layui-icon layui-icon-face-surprised"></i>
      <div>点击上传，或将文件拖拽到此处</div>
    </div>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
      预览图：
      <div class="layui-upload-list" id="upload-demo-preview"></div>
    </blockquote>
  </div>
  <button type="button" class="layui-btn layui-btn-danger" id="ID-upload-demo-size">
    <i class="layui-icon layui-icon-upload"></i> 上传图片
  </button>
</div>
<script>
  let ctx = '[[${#httpServletRequest.getContextPath()}]]';
</script>
<script th:src="@{/static/lib/juqery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['upload', 'element'], function () {
    var layer = layui.layer,
    upload = layui.upload,
    $ = layui.$,
    element = layui.element;

    // 渲染
    var uploadListIns = upload.render({
    elem: '#ID-upload-demo-drag',
    url: ctx + 'upload', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    auto: false, // 关闭自动上传
    bindAction: '#ID-upload-demo-size', // 不绑定默认的提交
    multiple: true, // 是否允许多文件上传。不支持 ie8/9
    data: {
    id: '123'
  },
    // number: 3, // 设置同时可上传的文件数量，一般配合 multiple 参数出现
    choose: function(obj){
    var that = this;
    var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列

    // 预读本地文件示例，不支持ie8
    obj.preview(function(index, file, result){
    // 渲染预览图
    let span = renderPreviewElement(result, file.name, index);

    // 删除  html元素 --> jquery 元素 $(html元素)
    $(span).on('click', function(){
    delete files[index]; // 删除对应的文件
    div.remove(); // 删除表格行
    // 清空 input file 值，以免删除后出现同名文件不可选
    uploadListIns.config.elem.next()[0].value = '';
  });
    element.render('progress'); // 渲染新加的进度条组件
  });
  },
    allDone: function(obj){
    layer.msg('上传成功');
    console.log(obj.total); // 上传的文件总数
    console.log(obj.successful); // 上传成功的文件数
    console.log(obj.failed); // 上传失败的文件数
  },
    progress: function(n, elem, e, index){
    $(".progressBox" + index).css("display", "block");
    element.progress('filter-demo'+ index, n + '%'); // 可配合 layui 进度条元素使用
  },
    error: function(index, upload){
    console.log(index); // 当前文件的索引
    // upload(); 重新上传的方法
  }
  });

    function renderPreviewElement(base64, fileName, index) {
    let container = document.createElement("div");
    container.className = "image-container";
    let html = `
                  <img src="${base64}" alt="${fileName}">
                    <div class="progressBox progressBox${index}">
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo${index}">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                    </div>
            `;
    container.innerHTML = html;
    let span = document.createElement("span");
    span.className = "close-button";
    span.innerHTML = "&times;";
    container.appendChild(span);
    // let div = document.createElement("div")
    // let img = document.createElement("img");
    // let span = document.createElement("span");
    // let progress = document.createElement("div");
    // let progressBox = document.createElement("div");
    // progressBox.classList.add("progressBox");
    // progressBox.classList.add("progressBox" + index);
    // div.className = "image-container";
    // img.src = base64;
    // img.alt = fileName;
    // img.title = fileName;
    // img.style.width = "90px";
    // img.style.height = "90px";
    // span.className = "close-button";
    // span.innerHTML = "&times;";
    // progress.className = "layui-progress layui-progress-big";
    // progress.setAttribute("lay-showPercent", "yes");
    // progress.setAttribute("lay-filter", "filter-demo" + index);
    // progress.innerHTML = '<div class="layui-progress-bar" lay-percent=""></div>';
    // progressBox.appendChild(progress);
    // div.appendChild(img);
    // div.appendChild(span);
    // div.appendChild(progressBox);
    $('#upload-demo-preview').append(container);
    return span;
  }
  });
 </script>
 </body>
</html>